<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p5_学子商城页面</title>
    <link rel="stylesheet" href="css/p5_学子商城页面.css">
</head>
<body>
    <header>
        <div class="center">
            <img src="img/header/logo.png" alt="logo图片" class="logo">
            <div class="input">
                <input type="text" placeholder="请输入您要搜索的内容">
                <img src="img/header/search.png" alt="输入框里的放大镜图片">
            </div>
            <div class="right">
                <a href="#"><img src="img/header/care.png" alt="收藏图片"><span>|</span></a>
                <a href=""><img src="img/header/order.png" alt="订单图片"><span>|</span></a>
                <a href=""><img src="img/header/shop_car.png" alt="购物车图片"><span>|</span></a>
                <a href="">帮助<span>|</span></a>
                <a href="">登录</a>
            </div>
        </div>
    </header>
    <nav>
        <div class="center">
            <ul>
                <li><a href="" class="active">首页</a></li>
                <li><a href="">电脑办公</a></li>
                <li><a href="">办公文具</a></li>
            </ul>
        </div>
    </nav>
    <!-- 轮播图 -->
    <div class="carousel">
        <div class="center">
            <div class="imgs">
                <!--目前我们无法实现JS轮播图效果，先插一张图-->
                <img src="img/carousel/banner1.png" alt="轮播图1">
            </div>
            <div class="left">
                <img src="img/carousel/arrow-left.png" alt="上一张图标">
            </div>
            <div class="right">
                <img src="img/carousel/arrow-right.png" alt="下一张图标">
            </div>
            <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div class="title">
        <div class="center">
            <img src="img/computer_icon.png">
            <span>办公电脑 /1F</span>
        </div>
    </div>
    <!-- 快捷键 .main>.center>.f1>.left+.right -->
    <div class="main">
        <div class="center">
            <div class="f1">
                <div class="left">
                    <div class="text">
                        <p class="p_title">灵越 燃7000系列</p>
                        <p class="p_intro">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
                            英特尔HD显卡620含共享显卡内存</p>
                        <p class="p_price">￥4999.00</p>
                        <a href="#">查看详情</a>
                    </div>
                    <img src="img/computer1.png" class="scale">
                </div>
                <div class="right">
                    <div class="text">
                        <p class="p_title">颜值 框不住</p>
                        <p class="p_intro">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
                            英特尔HD显卡620含共享显卡内存</p>
                        <p class="p_price">￥6888.00</p>
                        <a href="#">查看详情</a>
                    </div>
                    <img src="img/computer2.png" class="scale">
                </div>
            </div>
            <div class="f2">
                <div class="left">
                    <div class="tit">
                        <img src="img/icon.png">
                        <span>电脑,办公/1F</span>
                    </div>
                    <div class="item_all">
                        <!--ul>li>a Tab键-->
                        <p>电脑整机</p>
                        <ul>
                            <li><a href="#">笔记本</a></li>
                            <li><a href="#">游戏机</a></li>
                            <li><a href="#">台式机</a></li>
                            <li><a href="#">一体机</a></li>
                            <li><a href="#">服务器</a></li>
                            <li><a href="#">联想</a></li>
                        </ul>
                        <p>电脑配件</p>
                        <ul>
                            <li><a href="#">CPU</a></li>
                            <li><a href="#">SSD硬盘</a></li>
                            <li><a href="#">显示器</a></li>
                            <li><a href="#">显卡</a></li>
                            <li><a href="#">组装电脑</a></li>
                            <li><a href="#">机箱</a></li>
                        </ul>
                        <p>外设/游戏</p>
                        <ul>
                            <li><a href="#">键盘</a></li>
                            <li><a href="#">鼠标</a></li>
                            <li><a href="#">U盘</a></li>
                            <li><a href="#">移动硬盘</a></li>
                            <li><a href="#">游戏设备</a></li>
                            <li><a href="#">智能单车</a></li>
                        </ul>
                    </div>
                </div>
                <div class="card">
                    <img src="img/computer3.png" class="scale">
                    <p class="p_intro">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
                    <p class="p_price">￥4600.00</p>
                    <a href="#">查看详情</a>
                </div>
                <div class="card">
                    <img src="img/computer4.png" class="scale">
                    <p class="p_intro">14.8mm超轻薄笔记本电脑 航海王版13.3英寸微边框笔记本电脑</p>
                    <p class="p_price">￥5600.00</p>
                    <a href="#">查看详情</a>
                </div>
                <div class="card card3">
                    <img src="img/computer5.png" class="scale">
                    <p class="p_intro">联想(Lenovo) YOGA900 多彩版 13.3英寸微边框笔记本电脑</p>
                    <p class="p_price">￥6600.00</p>
                    <a href="#">查看详情</a>
                </div>
            </div>
            <ul class="picture">
                <li>
                   <img src="image/icon1.png">
                   <p>品质保障</p>
                </li>
                <li>
                   <img src="image/icon2.png">
                   <p>私人订制</p>
                </li>
                <li>
                   <img src="image/icon3.png">
                   <p>学员特供</p>
                </li>
                <li>
                   <img src="image/icon4.png">
                   <p>专属特权</p>
                </li>
            </ul>
        </div>
    </div>
    <footer>
        <div class="center">
            <!-- 左侧图片区 -->
            <div class="logo">
                <img src="img/footer/logo.png">
                <img src="img/footer/footerFont.png">
            </div>
            <!-- 中间列表区 -->
            <div class="centerlist">
                <ul>
                    <li><h5>买家帮助</h5></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">服务保障</a></li>
                    <li><a href="#">常见问题</a></li>
                </ul>
                <ul>
                    <li><h5>商家帮助</h5></li>
                    <li><a href="#">商家入驻</a></li>
                    <li><a href="#">商家后台</a></li>
                </ul>
                <ul>
                    <li><h5>关于我们</h5></li>
                    <li><a href="#">关于达内</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>
            <!-- 右侧下载区 -->
            <div class="download">
                <div class="left">
                    <p>学习商城客户端</p>
                    <img src="img/footer/android.png">
                    <img src="img/footer/ios.png" >
                </div>
                <div class="right">
                    <img src="img/footer/erweima.png">
                </div>
            </div>
            <!-- 最下方版权信息 -->
            <div class="end">
                <p class="end">©2017 达内集团有限公司 版权所有 京ICP证xxxxxxxxxxx</p>
            </div>
        </div>
    </footer>
</body>
</html>